<script setup>
import axios from "axios";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";

const activeName = ref("1");

var map_list = ref([]);

var task_list = ref([]);

var log_list = ref([]);

var bag_list = ref([]);

onMounted(() => {
  axios.get("http://192.168.1.100:9090/map/list").then((res) => {
    if (res.data.success) {
      map_list.value = res.data.data;
    }
  });

  axios.get("http://192.168.1.100:9090/task/list").then((res) => {
    if (res.data.success) {
      task_list.value = res.data.data;
    }
  });

  axios.post("http://192.168.1.100:9090/file_query", { file_type: "bags" }).then((res) => {
    if (res.data.success) {
      bag_list.value = res.data.data;
    }
  });

  axios.post("http://192.168.1.100:9090/file_query", { file_type: "logs" }).then((res) => {
    if (res.data.success) {
      log_list.value = res.data.data;
    }
  });
});

const router = useRouter();

const download = (filename, url) => {
  let a = document.createElement("a");
  a.style = "display: none";
  a.download = filename;
  a.href = url;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

const handleEdit = (index, row) => {
  router.push({ path: `/map/${row.id}`, query: row });
};

const handleExport = (index, row) => {
  axios.post("http://192.168.1.100:9090/download/maps", { maps: [row.id] }).then((res) => {
    if (res.data.success) {
      download(row.name, "http://192.168.1.100:9090" + res.data.data);
    }
  });

  //   axios.get("http://192.168.1.100:9090/opt/xzrobot/backup/2024-08-27-Maps.zip", { params: {}, responseType: "blob" }).then((res) => {
  //     if (res.data.success) {
  //       log_list.value = res.data.data;
  //     }
  //   });
  //   download("map.zip", "http://192.168.1.100:9090/opt/xzrobot/backup/2024-08-27-Maps.zip");
};

const handleExportBag = (index, row) => {
  download(row.name, "http://192.168.1.100:9090" + row.file_path);
};

const handleExecuteTask = (index, row) => {
  axios.post("http://192.168.1.100:9090/task/start", { terminal: 1, type: 2, task_id: row.id, name: row.name }).then((res) => {
    if (res.data.success) {
      log_list.value = res.data.data;
    } else {
      Message;
    }
  });
};

const handleDelete = (index, row) => {
  axios.post("http://192.168.1.100:9090/map/delete", (data = { id: row.id })).then((res) => {
    if (res.data.success) {
      // map_list.value = res.data.data;
    }
  });
};
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="地图" name="1">
      <el-row style="margin-bottom: 12px">
        <el-button>导入地图</el-button>
      </el-row>
      <el-table :data="map_list" border style="width: 100%">
        <el-table-column prop="id" label="地图ID" width="180" />
        <el-table-column prop="name" label="地图名称" width="180" />
        <el-table-column prop="building" label="楼栋" />
        <el-table-column prop="floor" label="楼层" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" @click="handleExport(scope.$index, scope.row)">导出</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="任务" name="2">
      <el-table :data="task_list" border style="width: 100%">
        <el-table-column prop="id" label="任务ID" width="180" />
        <el-table-column prop="name" label="任务名称" width="180" />
        <el-table-column prop="mode" label="模式" />
        <el-table-column prop="cycle" label="循环次数" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="handleEditTask(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" @click="handleExecuteTask(scope.$index, scope.row)">执行</el-button>
            <el-button size="small" type="danger" @click="handleDeleteTask(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="录包" name="3">
      <el-table :data="bag_list" border style="width: 100%">
        <el-table-column prop="file_name" label="录包名称" width="180" />
        <el-table-column prop="file_path" label="文件目录" />
        <el-table-column prop="file_size" label="文件大小" />
        <el-table-column prop="modify_time" label="修改时间" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="handleEditTask(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" @click="handleExportBag(scope.$index, scope.row)">下载</el-button>
            <el-button size="small" type="danger" @click="handleDeleteTask(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="日志" name="4">
      <el-table :data="log_list" border style="width: 100%">
        <el-table-column prop="name" label="日志名称" width="180" />
        <el-table-column prop="mode" label="创建时间" />
        <el-table-column prop="cycel" label="文件大小" />
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="handleEditTask(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDeleteTask(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
.common-layout,
.el-container,
.el-menu {
  height: 100%;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
